<template>
  <Layout :class="'bg-white p-2'">
    <Row :class="'m-1'">
      <Col span="4">
        <Button
          class="m-2"
          type="primary"
          shape="circle"
          @click="search"
          icon="ios-search"
          >查询</Button
        >
      </Col>
    </Row>
    <Layout :class="'bg-white'">
      <Table border :class="'m-1'" :columns="columnInfo" :data="proList">
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer disabled-hover trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Button type="primary" @click="confirmed(row)"
                  >收款审核通过</Button
                >
              </DropdownItem>
              <!-- <DropdownItem>
                <Button type="error" @click="unConfirmed(row)"
                  >收款审核不通过</Button
                >
              </DropdownItem> -->
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    let self = this
    return {
      searchProName: '',
      searchProLead: '',
      searchProAddr: '',
      columnInfo: [
        {
          width: 80,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '学生姓名',
          key: 'name',
          width: 100,
          fixed: 'left',
        },
        {
          title: '学生电话',
          key: 'tel',
          width: 180,
          fixed: 'left',
        },
        {
          title: '期数',
          key: 'number',
          width: 80,
        },
        {
          title: '应付',
          key: 'payable',
          width: 150,
        },
        {
          title: '服务费',
          key: 'service',
          width: 150,
        },
        {
          title: '机构应收',
          key: 'receivables',
          width: 150,
        },
        {
          title: '还款状态',
          key: 'status',
          width: 150,
        },
        {
          title: '还款日',
          key: 'payDate',
          width: 150,
        },
        {
          title: '计划还款日',
          key: 'planPayDate',
          width: 150,
        },
        {
          title: '支付方式',
          key: 'payMethod',
          width: 150,
        },
        {
          title: '审核人',
          key: 'confirmUserName',
          width: 350,
        },
        {
          title: '流水号',
          key: 'businessTNumber',
          width: 350,
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          fixed: 'right',
        },
      ],
      proList: [],
    }
  },
  methods: {
    search: function() {
      this.http
        .get({
          url: `/paymentItem/list/reviewed`,
        })
        .then((data) => {
          console.log(data)
          this.$data.proList = parseDataObj(data)
        })
    },
    confirmed: function(row) {
      let self = this
      console.log(row)
      this.message.confirm({
        title: '系统提示',
        content: '即将确认【' + row.name + '】的还款，确定吗？',

        onOk: () => {
          this.http
            .put({
              url: `/paymentItem/confirmed/${row.paymentItemId}`,
            })
            .then((data) => {
              this.message.info('确认收款成功')
              self.search()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
  },
  created: function() {
    this.search()
  },
}
function parseDataObj(data) {
  var BaomingArray = []
  data.forEach((list) => {
    let poko = {
      name: list.student.name,
      tel: list.student.tel,
      number: list.number,
      payable: list.paymentItem.payable,
      service: list.paymentItem.service,
      receivables: list.paymentItem.receivables,
      status: list.paymentItem.status,
      payDate: list.paymentItem.payDate,
      planPayDate: list.paymentItem.planPayDate,
      payMethod: list.paymentItem.payMethod,
      confirmUserName: list.paymentItem.confirmUserId,
      businessTNumber: list.paymentItem.confirmUserName,
      paymentItemId: list.paymentItem.id,
    }
    BaomingArray.push(poko)
  })
  return BaomingArray
}
</script>

<style></style>
